<script setup>
import { ref, onMounted } from 'vue'
import { Search, Refresh } from '@element-plus/icons-vue';
import {allocateOrderService, getOrderListService} from '@/apis/order';
import {ElMessage} from "element-plus";
const options = [
  {
    value: '',
    label: '全部',
  },
  {
    value: '0',
    label: '待支付',
  },
  {
    value: '1',
    label: '待发货',
  },
  {
    value: '2',
    label: '待收货',
  },
  {
    value: '3',
    label: '已完成',
  },
]
const tableData = ref([])
const total = ref(0)
const form = ref({
  page: 1,
  pageSize: 10,
  orderNumber: '',
  username: '',
  status: '',
  startTime: '',
  endTime: '',
})
const timeRange = ref([])
const getOrderList = async () => {
  form.value.startTime = timeRange.value[0]
  form.value.endTime = timeRange.value[1]
  const res = await getOrderListService(form.value)
  tableData.value = res.data.records
  total.value = res.data.total
  console.log(tableData.value)
}
const reset = () => {
  form.value = {}
}
const handlePageChange = (page) => {
  form.value.page = page
  getOrderList()
}

const allocate = async (row) => {
  const res = await allocateOrderService(row.id)
  console.log(row)
  if (res.code === 200) {
    ElMessage.success('发货成功')
    row.status = 2
  } else {
    ElMessage.error('发货失败')
  }
}

onMounted(() => {
  getOrderList()
})
</script>
<template>
  <el-container>
    <el-header>
      <el-form>
        <div class="layout-row">
          <el-form-item>
            <span>订单号</span>
            <el-input v-model="form.orderNumber" style="width: 180px" placeholder="请输入订单编号" />
          </el-form-item>
          <el-form-item>
            <span>用户名</span>
            <el-input v-model="form.username" style="width: 180px" placeholder="请输入用户名" />
          </el-form-item>
          <el-form-item>
            <span>状态</span>
            <el-select v-model="form.status" placeholder="请选择" style="width: 120px">
              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
        </div>
        <div class="layout-row">
          <el-form-item>
            <span>时间范围</span>
            <el-date-picker type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
              value-format="YYYY-MM-DD" v-model="timeRange" @change="getOrderList" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="getOrderList">
              <el-icon>
                <Search />
              </el-icon>搜索
            </el-button>
            <el-button @click="reset">
              <el-icon>
                <Refresh />
              </el-icon>重置
            </el-button>
          </el-form-item>
        </div>
      </el-form>
    </el-header>
    <el-main>
      <el-table :data="tableData" style="width: 100%" height="340">
        <el-table-column prop="orderNumber" label="订单号" width="150" />
        <el-table-column prop="username" label="用户名" width="140" />
        <el-table-column prop="status" label="状态" width="120">
          <template #default="{ row }">
            <span v-if="row.status === 0">待支付</span>
            <span v-else-if="row.status === 1"><el-button type="primary" @click="allocate(row)">发货</el-button></span>
            <span v-else-if="row.status === 2">待收货</span>
            <span v-else-if="row.status === 3">已完成</span>
          </template>
        </el-table-column>
        <el-table-column prop="title" label="商品名称" width="200">
          <template #default="{ row }">
            <div style="display: flex;align-items: center;">
              <el-avatar :size="40" src="/src/assets/images/avatar.png" />
              <span
                style="margin-left: 10px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;width: 100px;">{{
                row.title }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="price" label="价格" width="120" />
        <el-table-column prop="num" label="数量" width="120" />
        <el-table-column label="总价" width="120">
          <template #default="{ row }">
            <span>{{ row.price * row.num }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="orderTime" label="下单时间" width="180" />
        <el-table-column fixed="right" label="操作" min-width="120">
          <template #default>
            <el-button link type="primary" size="small">
              Detail
            </el-button>
            <el-button link type="primary" size="small">Edit</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-main>
    <el-footer>
      <el-pagination background layout="prev, pager, next" :total="total" @change="handlePageChange" />
    </el-footer>
  </el-container>
</template>
<style scoped lang="scss">
@import url("@/assets/style/manage.scss");
</style>
